<template>
	<mescroll-uni :ref="'mescrollRef'+tabIndex" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="u-text-center content-desc-item u-padding-top-20 u-font-24" v-if="dataList.length>0">本榜单现仅统计本平台数据</view>
		<view class="u-padding-left-32 u-padding-right-32">
			<view class="u-margin-top-20 larp" v-for="(item,index) in dataList" :key="index" @click="detail(item)">
			<list-item :tabIndex="tabIndex" customClassName="u-col-top" :item="item.storeProduct" :isShare="false"
				:showFooterRight="false" :showTime="false" :height="225" :width="140" :showTagImage="false">
				<view slot="arrow" class="u-flex">
					<trend :trend="item.trend"></trend>
					<text class="u-margin-left-10 u-font-28 text-color-txtTheme">{{item.salesNum}}</text>
				</view>
				<view class="u-flex u-margin-right-16">
					<image-number :number="item.presentLocation"></image-number>
				</view>
				<view slot="content">
				</view>
			</list-item>
		</view>
		</view>
	</mescroll-uni>
</template>

<script>
	import upCallback from '@/mixins/upCallbackMixin.js'
	import trend from './trend.vue'
	import imageNumber from '@/components/imageNumber/imageNumber.vue'
	export default {
		mixins: [upCallback],
		props: {
			item: {
				type: Object,
				default: () => ({})
			},
			tabIndex: {
				type: Number,
				default: 0
			}
		},
		components: {
			trend,
			imageNumber
		},
		data() {
			return {
				apiModule: 'shopApi',
				apiType: 'powerListProduct',
				name: 'getPowerListByProduct',
				show: false,
				checkObj: {},
				showAddressFlag: false,
				expressList: [],
				form: {},
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		created() {
			this.form.creatorId = this.$store.getters.loginForm.uid;
		},
		methods: {
			detail(item) {
				if (item.mallProductId) {
					this.$u.route({
						url: '/pagesA/itemDetail/goodsDetail',
						params: {
							id: item.mallProductId,
						}
					})
				} else {
					this.$u.toast("该剧本暂未上架商城")
				}
			}
		}
	}
</script>
<style lang="scss">
	/deep/.userNametext {
		color: #A6A8CD;
		font-weight: 500;
	}

	/deep/.item-name {
		margin-top: 8rpx;
	}
</style>
<style scoped lang="scss">
	.salesNum {
		background: rgba(118, 92, 254, 0.2);
		border-radius: 6rpx;
		color: #8973FF;
		font-size: 22rpx;
		padding: 8rpx 9rpx;
		display: inline-block;
		margin-top: 10px;
	}

	.number {
		width: 94rpx;
		display: flex;
		text-align: center;

		.img {
			padding-top: 13rpx;
			display: flex;
			margin: 0 auto;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			text-align: center;
		}
	}
</style>
